<template>
  <card class="add-info-card" :showDivider="false">
    <section class="card-content">
      <div class="section-item-content" v-for="child in copyEnterpriseDetail.detail" :key="child.id">
        <div class="type-list">
          <div class="type-item">
            <span>结算方式：</span>
            <p>{{ getSystemName(child.wayType.way) }}</p>
          </div>
          <div class="type-item">
            <span>收付款类型：</span>
            <p>{{ child.wayType.typeStr }}</p>
          </div>
        </div>
        <div class="info-list" v-if="child.account && child.account.length > 0">
          <!-- 嘉联聚合支付 -->
          <div class="content" v-if="child.wayType.way == -1">
            <div class="content-list" v-for="(item, childIndex) in child.account" :key="childIndex">
              <div class="item">
                <span>结算主体：</span>
                <p>{{ item.bank }}</p>
              </div>
            </div>
          </div>
          <div class="content" v-else>
            <div class="content-list" v-for="(item, childIndex) in child.account" :key="childIndex">
              <div class="item">
                <!-- 嘉联聚合支付的结算方式 -->
                <span>{{ child.wayType.way == -1 ? '收付款账号' : '结算账号' }}：</span>
                <p>{{ item.account }}</p>
              </div>
              <div class="item">
                <span>开户行：</span>
                <p>{{ item.bank }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </card>
</template>

<script setup lang="ts">
  import { watch, reactive, ref } from 'vue'
  import { cloneDeep } from 'lodash-es'
  import { FormInstance } from 'element-plus'

  interface Props {
    status: string
    enterpriseDetail: any
    syetemList: {
      type: Array<any>
      default: {
        default: []
      }
    }
  }

  const formRefs = ref<FormInstance>()
  const props = defineProps<Props>()
  const disabledList = ref<number[]>([])
  const copyEnterpriseDetail = reactive<{ detail: any }>({
    detail: [],
  })
  const defaultAccount = {
    id: '',
    account: '',
    bank: '',
  }

  // 回显结算方式
  const getSystemName = (val: any) => {
    let systemList = props.syetemList as any
    let changeName = systemList.in_exp_account_way.find((i: any) => i.value == val)
    if (changeName) {
      changeName = changeName.label
    } else {
      changeName = ''
    }
    return changeName
  }
  const save = () => {
    return new Promise((resolve, reject) => {
      formRefs.value?.validate((valid) => {
        if (valid) {
          reject()
          return false
        }
        resolve(copyEnterpriseDetail.detail)
      })
    })
  }

  defineExpose({
    save,
  })

  watch(
    () => [props.enterpriseDetail, props.status, props.syetemList],
    ([val1, val2]) => {
      console.log(val1, 'val112222')

      disabledList.value = []
      copyEnterpriseDetail.detail = cloneDeep(val1)
      if (val2 === 'edit') {
        copyEnterpriseDetail.detail.forEach((item) => {
          if (!item.account || item.account.length === 0) {
            item.account = [{ ...defaultAccount }]
          }
        })
      }
      disabledList.value.push(...copyEnterpriseDetail.detail.map((item) => item.wayType.way!))
    },
    { immediate: true, deep: true }
  )
</script>

<style scoped lang="less">
  .card-content {
    margin-top: -30px;
  }
  .section-item-content {
    margin-bottom: 20px;
  }
  .type-list {
    background: #f2f3f5;
    border: 1px solid #e5e8ef;
    border-bottom: none;
    display: flex;
    align-items: center;

    padding: 20px;
    .type-item {
      display: flex;
      width: 260px;
      span {
        color: #4e5969;
      }
      p {
        color: #1d2129;
      }
    }
  }
  .info-list {
    border: 1px solid #e5e8ef;
    border-top: none;
    padding: 20px;
    .content {
      padding: 12px 20px;
      background: #fbfbfc;
      .content-list {
        display: flex;
        .item {
          display: flex;
          align-items: center;
          margin: 8px 0;
          width: 340px;
          span {
            color: #4e5969;
          }
          p {
            color: #1d2129;
          }
        }
      }
    }
  }
  .page-form-item-1 {
    padding-right: 7px !important;
  }
  .page-form-item-2 {
    padding-left: 7px !important;
  }
  .a-card__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px 172px 0 20px;
    // margin-bottom: 20px;

    .contact-item {
      position: relative;
      .operate-list {
        position: absolute;
        left: 100%;
        bottom: 20px;
        width: 154px;
        padding-left: 16px;
        .operate-btn {
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          white-space: nowrap;
          outline: none;
          cursor: pointer;
          user-select: none;
          padding: 0 5px;
          &.del {
            color: #ea0000;
          }
          &.new {
            color: #165dff;
          }
        }
      }
    }
  }
</style>
